html,
body {
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  position: relative;
  width: 140px;
  height: 64px;
  margin: auto;
}

// 使用渐变来画边框
.gradient {
  background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x, 
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
  background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  cursor: pointer;

  &:hover {
    animation: linearGradientMove 0.3s infinite linear;
  }
}

.outline {
  // border: 1px solid #333; // 使用 border，变化的时候会感受到偏差
  outline: 1px solid #333;
  outline-offset: -1px;
  transition: all 0.3s linear;
  cursor: pointer;

  &:hover {
    // border: 1px solid transparent;
    outline: 1px solid transparent;
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
      linear-gradient(90deg, #333 50%, transparent 0) repeat-x, 
      linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
      linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: linearGradientMove 0.3s infinite linear;
  }
}

@keyframes linearGradientMove {
  100% {
    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
  }
}
